<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"
	import="boxmeout.web.utils.GUIDataHelper"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link REL="SHORTCUT ICON" href="../images/favico.ico"/>
<link rel="icon" href="../images/favico.gif" type="image/gif" >
<link rel="stylesheet" type="text/css" href="../css/user.css"/>
<script language="JavaScript" type="text/javascript">
	var ctxRoot="<%=request.getContextPath()%>";
</script>
<script language="JavaScript" src="../js/utils.js"></script>
<script language="JavaScript" src="../js/user.js"></script>
<title>Box Me Out</title>
</head>
<body>
	<table width="99%" class="framework" id="mainFrameWork">
		<tr>
			<td class="left">
 				<fieldset>
					<legend>Game Options</legend>
					<table class="userprofile">
						<tbody>
							<tr>
								<td>Game Name</td>
								<td><input type="text" id="gamename" name="gamename"></td>
								<td class="cellspacer">&nbsp;</td>
								<td>Number of Players</td>
								<td>
									<select name="playercount" id="playercount" onchange="changePlayerInputs(this)">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
									</select>
								</td>
								<td class="cellspacer">&nbsp;</td>
								<td>Game Difficulty</td>
								<td>
									<select name="gamelevel" id="gamelevel">
										<option value="5">Easy</option>
										<option value="8">Medium</option>
										<option value="10">Hard</option>
									</select>
								</td>
							</tr>
						</tbody>
					</table>
				</fieldset>
			</td>
			<td rowspan="3" class="right">
				<fieldset ><legend>Game Rooms</legend>
					<% if(GUIDataHelper.hasGameRooms(application)){ %>
					<table class="userprofile">
						<thead>
							<tr>
								<th>Room</th>
								<th>Creator</th>
								<th>Players</th>
								<th>Viewers</th>
								<th>&nbsp;</th>
							</tr>
						</thead>
						<tbody>
							<%=GUIDataHelper.getGameRoomInfo(application) %>
						</tbody>
					</table>
					<%} %>				
				</fieldset>
			</td>			
		</tr>
		<tr>
			<td class="left">
				<fieldset><legend>Player Profile</legend>
					<table class="userprofile" id="p1">
						<tbody>
							<tr>
								<td>Player Name</td>
								<td><input type="text" id="p1name" name="p1name"></td>
								<td  class="cellspacer">&nbsp;</td>
								<td>Screen Name</td>
								<td><input type="text" id="p1sname" name="p1sname"></td>
							</tr>
							<tr>
								<td rowspan="2">Player Color</td>
								<td colspan="4">
									<table class="userprofilecolor">
										<tr>
											<td>
												<input type="radio" name="p1color" id="p11color" value="RED">
											</td>
											<td>
												<div id="pcolordiv" class="red"></div>
											</td>
											<td>
												<input type="radio" name="p1color" id="p12color" value="BLUE">
											</td>
											<td>
												<div id="pcolordiv" class="blue"></div>
											</td>
											<td>
												<input type="radio" name="p1color" id="p13color" value="PURPLE">
											</td>
											<td>
												<div id="pcolordiv" class="purple"></div>
											</td>
											<td>
												<input type="radio" name="p1color" id="p14color" value="YELLOW">
											</td>
											<td>
												<div id="pcolordiv" class="yellow"></div>
											</td>
										</tr>
										<tr>
											<td>
												<input type="radio" name="p1color" id="p15color" value="PINK">
											</td>
											<td>
												<div id="pcolordiv" class="pink"></div>
											</td>
											<td>
												<input type="radio" name="p1color" id="p16color" value="GREEN">
											</td>
											<td>
												<div id="pcolordiv" class="green"></div>
											</td>
											<td>
												<input type="radio" name="p1color" id="p17color" value="ORANGE">
											</td>
											<td>
												<div id="pcolordiv" class="orange"></div>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<hr id="phrs_1" style="display: none;"/>
					<table class="userprofile" id="p2" style="display: none;">
						<tbody>
							<tr>
								<td>Player Name</td>
								<td><input type="text" id="p2name" name="p2name"></td>
								<td class="cellspacer">&nbsp;</td>
								<td>Screen Name</td>
								<td><input type="text" id="p2sname" name="p2sname"></td>
							</tr>
							<tr>
								<td rowspan="2">Player Color</td>
								<td colspan="4">
									<table class="userprofilecolor">
										<tr>
											<td>
												<input type="radio" name="p2color" id="p21color" value="RED">
											</td>
											<td>
												<div id="pcolordiv" class="red"></div>
											</td>
											<td>
												<input type="radio" name="p2color" id="p22color" value="BLUE">
											</td>
											<td>
												<div id="pcolordiv" class="blue"></div>
											</td>
											<td>
												<input type="radio" name="p2color" id="p23color" value="PURPLE">
											</td>
											<td>
												<div id="pcolordiv" class="purple"></div>
											</td>
											<td>
												<input type="radio" name="p2color" id="p24color" value="YELLOW">
											</td>
											<td>
												<div id="pcolordiv" class="yellow"></div>
											</td>
										</tr>
										<tr>
											<td>
												<input type="radio" name="p2color" id="p25color" value="PINK">
											</td>
											<td>
												<div id="pcolordiv" class="pink"></div>
											</td>
											<td>
												<input type="radio" name="p2color" id="p26color" value="GREEN">
											</td>
											<td>
												<div id="pcolordiv" class="green"></div>
											</td>
											<td>
												<input type="radio" name="p2color" id="p27color" value="ORANGE">
											</td>
											<td>
												<div id="pcolordiv" class="orange"></div>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<hr id="phrs_2" style="display: none;"/>
					<table class="userprofile" id="p3" style="display: none;">
						<tbody>
							<tr>
								<td>Player Name</td>
								<td><input type="text" id="p3name" name="p3name"></td>
								<td class="cellspacer">&nbsp;</td>
								<td>Screen Name</td>
								<td><input type="text" id="p3sname" name="p3sname"></td>
							</tr>
							<tr>
								<td rowspan="2">Player Color</td>
								<td colspan="4">
									<table class="userprofilecolor">
										<tr>
											<td>
												<input type="radio" name="p3color" id="p31color" value="RED">
											</td>
											<td>
												<div id="pcolordiv" class="red"></div>
											</td>
											<td>
												<input type="radio" name="p3color" id="p32color" value="BLUE">
											</td>
											<td>
												<div id="pcolordiv" class="blue"></div>
											</td>
											<td>
												<input type="radio" name="p3color" id="p33color" value="PURPLE">
											</td>
											<td>
												<div id="pcolordiv" class="purple"></div>
											</td>
											<td>
												<input type="radio" name="p3color" id="p34color" value="YELLOW">
											</td>
											<td>
												<div id="pcolordiv" class="yellow"></div>
											</td>
										</tr>
										<tr>
											<td>
												<input type="radio" name="p3color" id="p35color" value="PINK">
											</td>
											<td>
												<div id="pcolordiv" class="pink"></div>
											</td>
											<td>
												<input type="radio" name="p3color" id="p36color" value="GREEN">
											</td>
											<td>
												<div id="pcolordiv" class="green"></div>
											</td>
											<td>
												<input type="radio" name="p3color" id="p37color" value="ORANGE">
											</td>
											<td>
												<div id="pcolordiv" class="orange"></div>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<hr id="phrs_3" style="display: none;"/>
					<table class="userprofile" id="p4" style="display: none;">
						<tbody>
							<tr>
								<td>Player Name</td>
								<td><input type="text" id="p4name" name="p4name"></td>
								<td class="cellspacer">&nbsp;</td>
								<td>Screen Name</td>
								<td><input type="text" id="p4sname" name="p4sname"></td>
							</tr>
							<tr>
								<td rowspan="2">Player Color</td>
								<td colspan="4">
									<table class="userprofilecolor">
										<tr>
											<td>
												<input type="radio" name="p4color" id="p41color" value="RED">
											</td>
											<td>
												<div id="pcolordiv" class="red"></div>
											</td>
											<td>
												<input type="radio" name="p4color" id="p42color" value="BLUE">
											</td>
											<td>
												<div id="pcolordiv" class="blue"></div>
											</td>
											<td>
												<input type="radio" name="p4color" id="p43color" value="PURPLE">
											</td>
											<td>
												<div id="pcolordiv" class="purple"></div>
											</td>
											<td>
												<input type="radio" name="p4color" id="p44color" value="YELLOW">
											</td>
											<td>
												<div id="pcolordiv" class="yellow"></div>
											</td>
										</tr>
										<tr>
											<td>
												<input type="radio" name="p4color" id="p45color" value="PINK">
											</td>
											<td>
												<div id="pcolordiv" class="pink"></div>
											</td>
											<td>
												<input type="radio" name="p4color" id="p46color" value="GREEN">
											</td>
											<td>
												<div id="pcolordiv" class="green"></div>
											</td>
											<td>
												<input type="radio" name="p4color" id="p47color" value="ORANGE">
											</td>
											<td>
												<div id="pcolordiv" class="orange"></div>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class="userprofile" width="100%">
						<tbody>
							<tr align="center">
								<td >
									<input type="button" value="New Game" id="create" name="create" onclick="createProfile()">
								</td> 
							</tr>
						</tbody>
					</table>					
				</fieldset>
			</td>
		</tr>
	</table>
	<div id="loaderPannel" class="loaderPannel">
		<div id="loaderPannel_wait">
			<img src="../images/loader2.gif">
			<br/>
			Processing request...please wait.
		</div>
		<div id="loaderPannel_resp" style="display:none;">
			<span id="loaderPannel_resptxt"></span>
			<br/>
			<br/>
			<input type="button" id="loaderOk" value="OK" onclick="ackServerResp()">
		</div>
	</div>
</body>
</html>